<template>
  <div class="question-card">
    <div class="question-header">
      <div class="question-meta">
        <span class="difficulty" :class="difficultyClass">{{ question.difficulty }}</span>
        <div class="tags">
          <span v-for="tag in question.tags" :key="tag" class="tag">{{ tag }}</span>
        </div>
      </div>
      <button @click="toggleFavorite" :class="['favorite-btn', { active: question.favorite }]">
        <i class="star-icon">{{ question.favorite ? '⭐' : '☆' }}</i>
      </button>
    </div>
    
    <h3 class="question-title" @click="toggleExpanded">
      <span class="expand-icon">{{ isExpanded ? '▼' : '▶' }}</span>
      {{ question.title }}
    </h3>
    
    <div v-if="isExpanded" class="question-content">
      <div class="question-description" v-html="formatContent(question.content)"></div>
      
      <div v-if="question.code" class="code-section">
        <h4>代码示例：</h4>
        <pre class="code-block"><code>{{ question.code }}</code></pre>
      </div>
      
      <div v-if="question.answer" class="answer-section">
        <button @click="showAnswer = !showAnswer" class="answer-toggle">
          {{ showAnswer ? '隐藏答案' : '查看答案' }}
        </button>
        <div v-if="showAnswer" class="answer-content" v-html="formatContent(question.answer)"></div>
      </div>
      
      <div v-if="question.tips" class="tips-section">
        <h4>💡 提示：</h4>
        <p v-html="formatContent(question.tips)"></p>
      </div>
      
      <div class="question-footer">
        <span class="question-id">#{{ question.id }}</span>
        <span class="category-badge" :class="categoryClass">{{ categoryName }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QuestionCard',
  props: {
    question: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      isExpanded: false,
      showAnswer: false
    }
  },
  computed: {
    difficultyClass() {
      const classMap = {
        '初级': 'difficulty-easy',
        '中级': 'difficulty-medium',
        '高级': 'difficulty-hard'
      };
      return classMap[this.question.difficulty] || 'difficulty-easy';
    },
    categoryClass() {
      const classMap = {
        'vue': 'category-vue',
        'javascript': 'category-js',
        'css': 'category-css'
      };
      return classMap[this.question.category] || 'category-vue';
    },
    categoryName() {
      const nameMap = {
        'vue': 'Vue.js',
        'javascript': 'JavaScript',
        'css': 'CSS'
      };
      return nameMap[this.question.category] || 'Vue.js';
    }
  },
  methods: {
    toggleExpanded() {
      this.isExpanded = !this.isExpanded;
      if (!this.isExpanded) {
        this.showAnswer = false;
      }
    },
    toggleFavorite() {
      this.$emit('toggle-favorite', this.question.id);
    },
    formatContent(content) {
      if (!content) return '';
      return content
        .replace(/\n/g, '<br>')
        .replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>')
        .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
        .replace(/\*([^*]+)\*/g, '<em>$1</em>');
    }
  }
}
</script>

<style scoped>
.question-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border: 1px solid #e2e8f0;
  transition: all 0.2s;
}

.question-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-color: #cbd5e1;
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.question-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.difficulty {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.difficulty-easy {
  background: #dcfce7;
  color: #166534;
}

.difficulty-medium {
  background: #fef3c7;
  color: #92400e;
}

.difficulty-hard {
  background: #fee2e2;
  color: #991b1b;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  background: #f1f5f9;
  color: #475569;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  border: 1px solid #e2e8f0;
}

.favorite-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 6px;
  transition: all 0.2s;
  font-size: 1.2rem;
}

.favorite-btn:hover {
  background: #f8fafc;
}

.favorite-btn.active .star-icon {
  color: #fbbf24;
}

.question-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s;
}

.question-title:hover {
  color: #667eea;
}

.expand-icon {
  font-size: 0.875rem;
  color: #94a3b8;
  transition: transform 0.2s;
}

.question-content {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
}

.question-description {
  color: #475569;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.code-section {
  margin: 1.5rem 0;
}

.code-section h4 {
  font-size: 0.9rem;
  color: #64748b;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.code-block {
  background: #1e293b;
  color: #e2e8f0;
  padding: 1rem;
  border-radius: 8px;
  overflow-x: auto;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}

.answer-section {
  margin: 1.5rem 0;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 8px;
  border-left: 4px solid #667eea;
}

.answer-toggle {
  background: #667eea;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  transition: background 0.2s;
}

.answer-toggle:hover {
  background: #5b6ae6;
}

.answer-content {
  color: #475569;
  line-height: 1.6;
}

.tips-section {
  margin: 1.5rem 0;
  padding: 1rem;
  background: #fffbeb;
  border-radius: 8px;
  border-left: 4px solid #f59e0b;
}

.tips-section h4 {
  color: #92400e;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.tips-section p {
  color: #78350f;
  line-height: 1.6;
  margin: 0;
}

.question-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
}

.question-id {
  color: #94a3b8;
  font-size: 0.75rem;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.category-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
}

.category-vue {
  background: #dcfce7;
  color: #166534;
}

.category-js {
  background: #fef3c7;
  color: #92400e;
}

.category-css {
  background: #dbeafe;
  color: #1e40af;
}

/* Inline code styling */
:deep(.inline-code) {
  background: #f1f5f9;
  color: #e11d48;
  padding: 0.125rem 0.25rem;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.875em;
}

/* Responsive */
@media (max-width: 768px) {
  .question-card {
    padding: 1rem;
  }
  
  .question-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
  
  .question-footer {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }
  
  .code-block {
    font-size: 0.75rem;
  }
}
</style> 